<template>
  <div class="app-container">
    <div class="main-content">
      <el-tabs
        v-model="activeName"
        class="tabs"
      >
        <el-tab-pane
          label="基本功能"
          name="basic"
        />
        <el-tab-pane
          label="增值服务"
          name="more"
        />
      </el-tabs>

      <el-row class="row-title">
        <el-col :span="6" />
        <el-col :span="6">
          免费版
        </el-col>
        <el-col :span="6">
          基础版
        </el-col>
        <el-col :span="6">
          标准版
        </el-col>
      </el-row>

      <div v-if="dataInfo.length">
        <el-row
          v-for="(item, index) in list[activeName]"
          :key="index"
          class="row-item"
        >
          <el-col
            :span="6"
            class=""
          >
            {{ item.name }}
          </el-col>
          <el-col :span="6">
            <el-input-number
              v-if="item.type=='number'"
              :model-value="dataInfo[0][item.key]"
              controls-position="right"
              :min="0"
              :max="100000000"
              @change="(v) => onChange(v, item.key, 1)"
            />
            <el-checkbox
              v-else
              :checked="dataInfo[0][item.key]"
              @change="(v) => onChange(v, item.key, 1)"
            />
          </el-col>
          <el-col :span="6">
            <el-input-number
              v-if="item.type=='number'"
              :model-value="dataInfo[1][item.key]"
              controls-position="right"
              :min="0"
              :max="100000000"
              @change="(v) => onChange(v, item.key, 1)"
            />
            <el-checkbox
              v-else
              :checked="dataInfo[1][item.key]"
              @change="(v) => onChange(v, item.key, 1)"
            />
          </el-col>
          <el-col :span="6">
            <el-input-number
              v-if="item.type=='number'"
              :model-value="dataInfo[2][item.key]"
              controls-position="right"
              :min="0"
              :max="100000000"
              @change="(v) => onChange(v, item.key, 1)"
            />
            <el-checkbox
              v-else
              :checked="dataInfo[2][item.key]"
              @change="(v) => onChange(v, item.key, 1)"
            />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
const activeName = ref('basic')

const list = {
  basic: [
    {
      name: '管理系统-上传SPU个数限制',
      key: 'spu',
      type: 'number'
    },
    {
      name: '管理系统-上传3D模型?',
      key: 'td'
    },
    {
      name: '管理系统-装修模板',
      key: 'zxmb'
    },
    {
      name: '管理系统-3D模型展示',
      key: 'tds'
    },
    {
      name: '管理系统-方案案列页面',
      key: 'fa'
    }
  ],
  more: [
    {
      name: '商品平替推荐',
      key: 'pt'
    },
    {
      name: '供应商推荐',
      key: 'gys'
    },
    {
      name: '搜索排名靠前',
      key: 'ssq'
    },
    {
      name: '直播',
      key: 'zb'
    }
  ]
}

const onChange = (v, key, ver) => {
  // TODO
  console.log(`商城版本: ${ver}, 修改key: ${key}, 改成 ${v}`)
}

const dataInfo = ref([])
onMounted(() => {
  // 查询
  dataInfo.value = [
    {
      mallVersion: 1,
      spu: 0,
      td: true,
      tds: false,
      zxmb: false,
      fa: false,
      pt: false,
      gys: false,
      ssq: false,
      zb: false
    },
    {
      mallVersion: 2,
      spu: 10,
      td: true,
      tds: false,
      zxmb: true,
      fa: false,
      pt: true,
      gys: true,
      ssq: true,
      zb: false
    },
    {
      mallVersion: 3,
      spu: 1000,
      td: true,
      tds: true,
      zxmb: true,
      fa: true,
      pt: true,
      gys: true,
      ssq: true,
      zb: true
    }
  ]
})
</script>

<style lang="scss" scoped>
.row-title{
  font-weight: bold;
  padding: 15px 0;
  text-align: center;
  background: #d9e1f0;
}

.row-item{
  padding: 10px 0;
  text-align: center;
  display: flex;
  align-items: center;
}

.row-item:nth-child(even){
  background: #F7F8FA;
}

</style>
